<template>
  <view>
    <view v-for="(item, index) in list" class="bbsPush" :key="index">
      <view v-if="item.type === 28">
        <view style="margin: 3px; overflow: auto; position: relative">
          <view class="headerImge"
            ><u-avatar
              :text="item.createUserName"
              bg-color="#0A98D5"
              size="mini"
              style="color: #fff"
            ></u-avatar
          ></view>
          <view style="float: left; margin-left: 5px; margin-top: 3px">
            <text>{{ item.createUserName }} 发布了帖子</text>
            <view style="color: #c0c0c0; font-size: 12px; margin-top: 5px">{{
              item.createTime
            }}</view>
          </view>
          <u-tag
            class="statusMage"
            style="float: right"
            :text="item.isRead ? '已处理' : '未处理'"
            :type="item.isRead ? 'success' : 'error'"
            size="mini"
          />
        </view>
        <u-line />
        <view class="contentext" @click="viewBbsCont(item)">
          <view class="mainTitle" style="font-size: 18px; font-weight: 600">{{
            item.title
          }}</view>
          <view class="u-bbslabel" style="margin: 5px 0">
            <u-tag
              :text="item.contentType"
              type="primary"
              size="mini"
              style="margin-right: 5px"
            />
            <u-tag
              :text="item.businessModularType"
              type="primary"
              size="mini"
            />
          </view>
          <view class="u-content">
            <u-parse :html="item.content"></u-parse>
          </view>
        </view>
      </view>
      <view v-if="item.type === 27" class="replyMage">
        <view style="margin: 3px; overflow: auto; position: relative">
          <view class="headerImge"
            ><u-avatar
              :text="item.createUserName"
              bg-color="#0A98D5"
              size="mini"
              style="color: #fff"
            ></u-avatar
          ></view>
          <view style="float: left; margin-left: 5px; margin-top: 3px">
            <text>{{ item.createUserName }} 评论了你</text>
            <view style="color: #c0c0c0; font-size: 12px; margin-top: 5px">{{
              item.createTime
            }}</view>
          </view>
          <u-tag
            class="statusMage"
            @click="dispose(item)"
            :text="item.isRead ? '已处理' : '标记为处理'"
            :type="item.isRead ? 'success' : 'error'"
            size="mini"
          />
        </view>
        <u-line />
        <view class="contentext" @click="toResouse(item)">
          <u-tag
            :text="item.label === 101 ? '资源' : '社区'"
            type="info"
            size="mini"
          />
          <u-parse :html="item.content" style="margin: 10px 0px"></u-parse>
          <view
            style="color: #0066cc; float: right"
            @click.stop="openReply(item)"
            >回复</view
          >
        </view>
      </view>
    </view>
    <u-empty mode="data" v-if="list.length === 0"></u-empty>
    <view style="margin: 10px">
      <uni-pagination
        v-if="num > 0"
        style="width: 100%"
        @change="handlePage"
        show-icon="true"
        :total="num"
        pageSize="10"
        :current="currentPage"
      ></uni-pagination>
    </view>
    <!-- 功能菜单 -->
    <u-popup
      v-model="show"
      mode="bottom"
      :closeable="closeable"
      :close-icon-pos="closeIconPos"
    >
      <view style="padding: 16rpx; width: 100%">
        <editor-bar
          class="editorBar"
          :index="index"
          :item="item"
          :value="item.value"
          :disabled="item.disabled"
          :relation="item.relation"
          @value-change="fieldValueChange"
          type="replyType"
        ></editor-bar>
        <view class="bottom" style="display: flex; margin-top: 25rpx">
          <u-button type="primary" @click="emptyCont(0)" style="width: 50%"
            >提交</u-button
          >
          <u-button type="warning" @click="emptyCont(1)" style="width: 50%"
            >匿名提交</u-button
          >
        </view>
      </view>
    </u-popup>
    <!-- 评论内容为空时的提示 -->
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { lookMessage, readMessage, KmsAddCommentBbs } from "@/api/kms/bbs.js";
import EditorBar from "@/pages/kmsManagement/common/editorPl.vue";
import uniPagination from "@/components/uni-pagination/uni-pagination.vue";
export default {
  data() {
    return {
      item: {
        key: "content",
        data: {
          fieldId: 382,
          formType: "textarea",
          isNull: 1,
          isDisabled: 0,
          isUnique: 0,
          inputTips: null,
          label: 103,
          type: 2,
          fieldName: "content",
          setting: [],
          name: "内容",
          options: null,
          value: "",
          fieldType: 1,
        },
        disabled: false,
        value: "",
        relation: {},
      },
      warp_top: 0,
      uf_top: "0px",
      msg_user: "",
      list: [],
      num: 0,
      show: false,
      closeable: true,
      closeIconPos: "top-right",
      content: null,
      isClear: false,
      replyType: "reply",
      openReplyItem: "",
      // 分页
      currentPage: 1,
    };
  },
  components: {
    EditorBar,
    uniPagination,
  },
  computed: {},
  onLoad() {},

  // 页面处理函数--监听用户下拉动作
  async onPullDownRefresh() {
    this.currentPage = 1;
    await this.getMessage();
    uni.stopPullDownRefresh();
  },
  // 页面处理函数--监听用户上拉触底
  async onReachBottom() {
    this.currentPage++;
    await this.getList();
  },
  onShow() {
    this.getMessage();
  },
  mounted() {
    let _this = this;
    let obj = uni.createSelectorQuery().select(".uf_umk");
    obj
      .boundingClientRect(function (data) {
        _this.warp_top = data.top;
      })
      .exec();
  },
  watch: {},
  methods: {
    fieldValueChange(data) {
      this.msg_user = data.value;
    },
    // 获取焦点
    on_Focus(event) {
      let _this = this;
      uni.getSystemInfo({
        success: function (res) {
          let sbh = uni.getSystemInfoSync().statusBarHeight;
          let _rpx = sbh / (uni.upx2px(100) / 100) - 20;
          _this.uf_top =
            res.windowHeight +
            _rpx -
            event.detail.height -
            _this.warp_top +
            "rpx";
        },
      });
    },
    falseFocus() {
      this.show = false;
    },
    getMessage() {
      let self = this;
      let params = {
        page: this.currentPage,
        limit: 10,
      };
      lookMessage(params).then((res) => {
        self.list = res.data.list;
        this.num = res.data.totalRow;
      });
    },
    dispose(item) {
      if (item.isRead === 1) {
        return;
      } else {
        let self = this;
        let params = {
          messageId: item.messageId,
        };
        readMessage(params).then((res) => {
          this.getMessage();
        });
      }
    },
    checkVal(str) {
      if (str === null) {
        return true;
      } else {
        let num = 0,
          reg = /<p>(&nbsp;|&nbsp;\s+)+<\/p>|<p>(<br>)+<\/p>/g;
        while (num < str.length && str != "") {
          num++;
          let k = str.match(reg);
          if (k) {
            str = str.replace(k[0], "");
          }
        }
        return str == "";
      }
    },
    emptyCont(num) {
      this.content = this.msg_user; //this.$refs.newsReply.info_;
      if (this.checkVal(this.content)) {
        this.$refs.uToast.show({
          title: "请输入有效的内容",
          type: "error",
          position: "bottom",
        });
      } else {
        this.subBbsCom(num);
      }
    },
    subBbsCom(num) {
      let self = this;
      let params = {
        entity: {
          label: this.openReplyItem.label,
          resourceId: this.openReplyItem.resourceId, //评论对象的id
          content: this.content,
          pid: this.openReplyItem.typeId,
          isAnonymous: num,
        },
      };
      KmsAddCommentBbs(params).then((res) => {
        self.show = false;
        self.dispose(this.openReplyItem);
        this.msg_user = "";
      });
    },
    openReply(item) {
      this.content = null;
      this.show = true;
      this.openReplyItem = item;
    },
    //查看论坛
    viewBbsCont(item) {
      uni.navigateTo({
        url:
          "/pages/kmsManagement/kmsFunList/bbs/bbsDetail?bbsId=" +
          item.resourceId,
      });
      this.dispose(item);
    },
    handlePage(params) {
      this.currentPage = params.current;
      this.getMessage();
    },
    toResouse(item) {
      //跳转到评论
      if (item.label === 101) {
        uni.navigateTo({
          url:
            "/pages/kmsManagement/kmsFunList/course/courseLog?courseId=" +
            item.resourceId +
            "&magPage=" +
            true +
            "&label=" +
            item.label,
        });
      } else if (item.label === 103) {
        uni.navigateTo({
          url:
            "/pages/kmsManagement/kmsFunList/bbs/bbsDetail?bbsId=" +
            item.resourceId,
        });
      }
      this.dispose(item);
    },
  },
};
</script>

<style>
.warp {
  height: 100%;
  margin-top: 255px;
}
/* 论坛 */
.bbsPush {
  margin: 10px;
  border: 1px solid #eeeeee;
  border-radius: 5px;
  background-color: #ecf5ff;
}
.statusMage {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
}
.replyMage {
  /* background-color: #0066CC; */
}
.headerImge {
  /* width: 35px;
		height: 35px;
		border-radius: 50%;
		background-color: #0A98D5;
		line-height: 35px;
		overflow: hidden;
		color: #FFFFFF; */
  float: left;
  margin-top: 5px;
}
.contentext {
  background-color: #ffffff;
  padding: 5px;
  font-size: 12px;
  overflow: auto;
}
.editorBar {
  margin-top: 31px;
}
</style>
